<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-司机报单二维码弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-modal-code-order" @click.stop>
		<uni-popup ref="popupModal" type="center" @change="onChange">
			<view class="popup-box">
				<view class="popup-header">
					<view class="title">报单</view>
					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
				</view>
				<view class="popup-content">
					<image class="content-image" :src="showData" mode="aspectFit"></image>
					<view class="content-text">扫描二维码下单</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "componentModalCodeOrder",
		props: ["showData"],
		methods: {
			// 打开模态框
			open() {
				this.$refs.popupModal.open()
			},
			// 关闭弹窗
			onClose() {
				this.$refs.popupModal.close()
			},
			// 改变事件
			onChange(e) {
				this.$emit("onChange", e.show)
			},
		},
	}
</script>

<style lang="scss">
	.component-modal-code-order {
		position: relative;
		z-index: 999;

		.popup-box {
			background: #FFF;
			border-radius: 32rpx;

			.popup-header {
				display: flex;
				align-items: center;
				padding: 48rpx 48rpx 0 96rpx;

				.title {
					color: #242629;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					flex: 1;
				}

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.popup-content {
				padding: 32rpx 48rpx 48rpx;

				.content-image {
					width: 504rpx;
					height: 504rpx;
				}

				.content-text {
					margin-top: 24rpx;
					color: #0F1511;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}
	}
</style>